import 'antd/dist/antd.css';

import { LoadingOutlined } from '@ant-design/icons';
import { ConfigProvider, Spin } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { lazy, Suspense, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
const Home = lazy(() => import('@/pages/index'));
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const Recorder = lazy(() => import('@/pages/recorder'));
const Redirect = ({ to = '/main/home' }) => {
  const navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
};
const App = () => {
  useEffect(() => {
    if (!localStorage.getItem('videoCacheDir')) {
      localStorage.setItem('videoCacheDir', window.api.getVideoCacheDir());
    }
  }, []);
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Redirect to="/main/home" />}></Route>
        <Route
          path="main/*"
          element={
            <Suspense fallback={<Spin indicator={antIcon} />}>
              <Home />
            </Suspense>
          }
        ></Route>
        <Route
          path="/recorder"
          element={
            <Suspense fallback={<Spin indicator={antIcon} />}>
              <Recorder />
            </Suspense>
          }
        ></Route>
      </Routes>
    </Router>
  );
};

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);
